<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Flask疫情大数据可视化平台</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
			integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
		<script src="js/china.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/theme.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		#chinamap {
			width:100%;
			height: 500px;
		}

		#Top10 {
			width:100%;
			height: 400px;
		}

		#newTop10 {
			width:100%;
			height: 400px;
		}


		#leiji_trend {
			width:100%;
			height: 430px;
		}

		#new_trend {
			width:100%;
			height: 430px;
		}

		.summaryText {
			color: #FFFFFF;
			font-size: 20px;
		}

		body {
			background-color: #0A002C;
			/* background: transparent url(img/Default1.jpg) center 0 repeat-y fixed; */
			background-size: cover;
			color: #333;
			padding: 0;
		}

		.conten-over {
			width: 350px;
			overflow-y: scroll;
			height: 350px;
		}

		.conten-over::-webkit-scrollbar {
			width: 0;
		}

		/*按钮点击与未点击CSS*/
		.Top_Click {
			font-size: 10px;
			float: left;
			width: 100px;
			padding: 3px;
			background-color: #428bca;
			border-color: #357ebd;
			color: #fff;
			text-align: center;
			border: 1px solid transparent;
			border: solid 5px #4d4e53;
			border-radius: 10px 10px 10px 10px;
		}
		.Top_unClick {
			font-size: 10px;
			float: left;
			width: 100px;
			padding: 3px;
			background-color: #ADADAD;
			border-color: #357ebd;
			color: #000;
			text-align: center;
			border: 1px solid transparent;
			border: solid 5px #4d4e53;
			border-radius: 10px 10px 10px 10px;
		}

		.world{
			font-size: 10px;
			float: right;
			width: 100px;
			padding: 3px;
			background-color: #ADADAD;
			border-color: #357ebd;
			color: #000;
			text-align: center;
			border: 1px solid transparent;
			border: solid 5px #4d4e53;
			border-radius: 10px 10px 10px 10px;
		}

	</style>

	<body>
		<!-- Html -->
		<div id="app" class="container-fluid">
			<!-- 左边 -->
			<div class="col-md-3">
				<!-- 左上 -->
				<div class="row" style="color: #FFFFFF;display: inline-block;font-size: 25px;margin-top: 20px;">
					<div @click="TREND_change(0)" :class="[TREND?'Top_Click':'Top_unClick']">全国累计趋势</div>
					<div class="glyphicon glyphicon-resize-vertical" style="float: left;color: #3E8F3E;"></div>
					<div @click="TREND_change(1)" :class="[TREND?'Top_unClick':'Top_Click']">全国新增趋势</div>
				</div>
				<div id="leiji_trend" class="row" v-show="TREND"></div>
				<div id="new_trend" class="row" v-show="!TREND"></div>
				<!-- 左下 -->
				<div class="row conten-over">
					<div class="panel panel-default">
						<!-- Default panel contents -->
						<div class="panel-heading">以下为 "{{cur_province}}" 的详细信息</div>
						<!-- Table -->
						<table class="table" border="1">
							<tr>
								<th>{{cur_province}}市/区</th>
								<th>患者累计</th>
								<th>已治愈</th>
								<th>死亡</th>
							</tr>
							<tr v-for="item in citylist">
								<td>{{item['city']}}</td>
								<td>{{item['confirmed']}}</td>
								<td>{{item['crued']}}</td>
								<td>{{item['died']}}</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<!-- 中间 -->
			<div class="col-md-6" style="text-align: center;">
				<div class="row">
					<h1 style="text-align: center;color: #FFFFFF;">基于Flask全国疫情大数据可视化平台</h1>
				</div>
				<div class="glyphicon glyphicon-resize-vertical" style="float: left;color: #3E8F3E;"></div>
				<div class="row" style="color: #12cdd4;text-align: left;font-size: 15px;">
					数据更新至：{{summarydata['mapLastUpdatedTime']}}
				</div>
				<div class="row" style="margin-bottom: 20px;">
					<div class="col-md-3">
						<div class="row summaryText">现有确诊</div>
						<div class="row" style="color:#FF6A57;font-size: 30px;">{{summarydata['curConfirm']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['curConfirmRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">无症状</div>
						<div class="row" style="color:#E86D48;font-size: 30px;">{{summarydata['asymptomatic']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['asymptomaticRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">现有疑似</div>
						<div class="row" style="color:#EC9217;font-size: 30px;">{{summarydata['unconfirmed']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['unconfirmedRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">现有重症</div>
						<div class="row" style="color:#545499;font-size: 30px;">{{summarydata['icu']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['icuRelative']}}</div>
					</div>
				</div>
				<div class="row" style="margin-bottom: 20px;">
					<div class="col-md-3">
						<div class="row summaryText">累计确诊</div>
						<div class="row" style="color:#E83132;font-size: 30px;">{{summarydata['confirmed']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['confirmedRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">境外输入</div>
						<div class="row" style="color:#476DA2;font-size: 30px;">{{summarydata['overseasInput']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['overseasInputRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">累计治愈</div>
						<div class="row" style="color:#10AEB5;font-size: 30px;">{{summarydata['cured']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['curedRelative']}}</div>
					</div>
					<div class="col-md-3">
						<div class="row summaryText">累计死亡</div>
						<div class="row" style="color:#4D5054;font-size: 30px;">{{summarydata['died']}}</div>
						<div class="row" style="color: #FFFFFF;">较昨日+{{summarydata['diedRelative']}}</div>
					</div>
				</div>
				<!-- 中下 -->
				<div id="chinamap" class="row"></div>
			</div>
			<!-- 右边 -->
			<div class="col-md-3">
				<!-- 右上 -->
				<div class="row" style="color: #FFFFFF;display: inline-block;font-size: 25px;margin-top: 20px;">
					<div @click="TOP_change(0)" :class="[OUTTOP10?'Top_Click':'Top_unClick']">境外输入TOP</div>
					<div class="glyphicon glyphicon-resize-vertical" style="float: left;color: #3E8F3E;"></div>
					<div @click="TOP_change(1)" :class="[OUTTOP10?'Top_unClick':'Top_Click']">国内新增TOP</div>
<!--					<div class="glyphicon glyphicon-resize-vertical" style="float: left;color: #3E8F3E;"></div>-->
<!--					<button class="world" @click="world_yiqin">全球疫情监控</button>-->
				</div>
				<div id='Top10' class="row" v-show="OUTTOP10"></div>
				<div id='newTop10' class="row" v-show="!OUTTOP10"></div>
				<!-- 右下 -->
				<div class="row" style="font-size: 22px;color: #FFFFFF;padding-bottom: 13px;font-weight: bold">国内最新资讯:</div>
				<div class="row conten-over">
					<!-- 列表数据渲染 -->
					<div v-for="item in homehotsearch">
						<div style="display: flex;text-align: center;height: 20px;">
							<span class="glyphicon glyphicon-record" aria-hidden="true"
								style="color: #0FAEB5;margin-right: 5px;line-height: 20px;"></span>
							<div style="color: #FFFFFF;line-height: 20px;">{{item['eventTime']}}</div>
						</div>
						<div
							style="height: auto;min-height:20px;border-left:1px solid #FFFFFF;text-align: left;margin-left: 6px;">
							<div style="padding-left:10px; color: #FFFFFF;text-align: left;">
								{{item['eventDescription']}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Js -->
		<script>
			var MapData = [];		//地图数据
			var topOverseasInput = [];		//境外输入
			var echartlist = [];		//echarts
			var trend = {};		//趋势
			var newAddTopProvince = [];		//省新增
			var TOPlist = []		//TOP
			var TRENDlist = []		//趋势列表

			window.onresize = function() {		//窗口发生调整时调用
				for (var i = 0; i < echartlist.length; i++) {
					echartlist[i].resize();
				}
			}

			const App = {
				data() {		//初始数据
					return {
						summarydata: {},
						homehotsearch: [],		//右下数据
						OUTTOP10: true,
						TREND: true,
						cityShowIndex: 0,
						cur_province:'',		//左下省份数据
						citylist: [],			//左下城市数据
						china_data:[],
						world_url:'http://www.huangmj.com:7999/world'  	//世界疫情
					}
				},

				mounted() {		//钩子函数：初始化页面之后对dom的操作
					this.getdata()
					this.get_summarydata()
					this.get_topOverseasInput()
					this.get_news()
					this.get_trend()
					this.get_newAddTopProvince()
				},

				methods: {   //相关方法，用this访问data:{}中数据
					world_yiqin: function (){
						// window.open(this.world_url,'_blank');	//新窗口打开
						window.location.href =this.world_url;		//本页面打开
					},
					update_city_info: function() {
						this.citylist = this.china_data[this.cityShowIndex]
					},
					TOP_change: function(flag) {
						if (flag == 0) {
							this.OUTTOP10 = true
						} else {
							this.OUTTOP10 = false
						}

						that.$nextTick(function() {
							TOPlist[0].resize();
							TOPlist[1].resize();
						})
					},
					TREND_change: function(flag) {
						if (flag == 0) {
							this.TREND = true
						} else {
							this.TREND = false
						}

						that.$nextTick(function() {
							TRENDlist[0].resize();
							TRENDlist[1].resize();
						})
					},

					//1.echarts相关设置
					//中国地图
					load_ChinaMap: function() {
						that = this
						var MapChart = echarts.init(document.getElementById('chinamap'));
						var optionMap = {
							backgroundColor: '#FFFFFF',
							title: {
								text: '积累确诊人数',
								subtext: '点击地图查看详细信息',
								x: 'center',
								textStyle: {
									color: '#FFFFFF',
									fontSize: 27,
								},
								subtextStyle: {
									color: '#FFFFFF',
									fontSize: 15,
								},
							},
							backgroundColor: '',
							tooltip: {
								trigger: 'item'
							},

							//左侧小导航图标
							visualMap: {
								show: true,
								x: 'left',		//左下脚位置设置
								y: 'bottom',
								textStyle: {
									color: '#FFFFFF'
								},
								splitList: [{		//数量对应级别颜色
										start: 1,
										end: 9
									}, {
										start: 10,
										end: 99
									},
									{
										start: 100,
										end: 999
									}, {
										start: 1000,
										end: 9999
									},
									{
										start: 10000
									}
								],
								color: ['#B80909', '#E64546', '#F57567', '#FF9985', '#FFE5DB']
							},

							//配置属性
							series: [{
								name: '积累确诊人数',
								type: 'map',
								mapType: 'china',
								roam: true,
								label: {
									normal: {
										show: true //省份名称  
									},
									emphasis: {
										show: true
									}
								},
								data: MapData 	//地图数据
							}]
						};
						//使用制定的配置项和数据显示图表
						MapChart.setOption(optionMap);
						MapChart.on('click', function(params) {
							that.cityShowIndex = params['dataIndex']
							that.cur_province=params['data']['name'];
							that.update_city_info()
						});
						echartlist.push(MapChart)
					},

					//境外输入TOP10
					load_Top: function() {
						var TopChart = echarts.init(document.getElementById('Top10'));
						var option = {
							title: {
								text: '境外输入TOP10',
								textStyle: {
									color: '#FFFFFF'
								},
								x: 'left'
							},
							xAxis: {
								data: topOverseasInput[0],
								axisLabel: {
									interval: 0, //强制文字产生间隔
									rotate: 45, //文字逆时针旋转45°
									textStyle: { //文字样式
										color: '#ffffff',
										fontSize: 15,
									}
								}
							},
							yAxis: {
								axisLabel: {
									color: '#fff',
									fontSize: 10,
								}
							},
							series: [{
								type: 'bar',
								data: topOverseasInput[1],
								label: {
									normal: {
										show: true
									},
									emphasis: {
										show: true
									}
								},
							}]
						};
						TopChart.setOption(option)
						echartlist.push(TopChart)
						TOPlist.push(TopChart)
					},
					//国内新增TOP
					load_New_Top: function() {
						var TopChart = echarts.init(document.getElementById('newTop10'));
						var option = {
							title: {
								text: '国内新增TOP10',
								textStyle: {
									color: '#FFFFFF'
								},
								x: 'left'
							},
							xAxis: {
								data: newAddTopProvince[0],
								axisLabel: {	//轴标签处理
									interval: 0, //强制文字产生间隔
									rotate: 45, //文字逆时针旋转45°
									textStyle: { //文字样式
										color: '#ffffff',
										fontSize: 15,
									}
								}
							},
							legend: {
								type: 'plain',
								show: true,
								orient: 'horizontal',
								textStyle: { //文字样式
									color: '#ffffff',
									fontSize: 15,
								},
								left: '40%',
							},
							yAxis: {
								axisLabel: {
									color: '#fff',
									fontSize: 13,
								}
							},
							series: [{
									name: '本土新增',
									type: 'bar',
									data: newAddTopProvince[1],
									label: {
										normal: {
											show: true
										},
										emphasis: {
											show: true
										}
									},
								},
								{
									name: '境外输入',
									type: 'bar',
									data: newAddTopProvince[2],
									label: {
										normal: {
											show: true
										},
										emphasis: {
											show: true
										}
									},
								}
							]
						};
						TopChart.setOption(option)
						echartlist.push(TopChart)
						TOPlist.push(TopChart)
					},

					//全国累计趋势
					load_leiji_Trend: function() {
						var TrendChart = echarts.init(document.getElementById('leiji_trend'));
						var option = {
							title: {
								text: '全国累计趋势',
								textStyle: {
									color: '#FFFFFF'
								},
								x: 'left'
							},
							xAxis: {
								data: trend['updateDate'],		//x轴数值来源
								axisLabel: {
									color: '#fff'
								}
							},
							tooltip: {
								show: true,
								trigger: 'axis',
								axisPointer: {
									type: 'line',
									axis: 'x',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							yAxis: {		//可独立配置
								// min: 1000000,
								// max: 8000000,
								axisLabel: {
									color: '#fff',
									fontSize: 10,
								// 	formatter: function(value, index) {
								// 		var value;
								// 		if (value >= 1000000) {
								// 			value = value / 1000000 + '00w';
								// 		} else if (value < 1000000) {
								// 			value = value;
								// 		}
								// 		return value
								// 	}
								},
							},
							legend: {
								type: 'plain',
								show: true,
								orient: 'horizontal',
								textStyle: { //文字样式
									color: '#ffffff',
									fontSize: 15,
								},
								left: '30%',
							},
							series: [{					//图例的数据
									name: '确诊',
									data: trend['list'][0]['data'],
									type: 'line',
									color: '#C31667'
								},
								{
									name: "治愈",
									data: trend['list'][2]['data'],
									type: 'line',
									color: '#58DC2B'
								},
								{
									name: "死亡",
									data: trend['list'][3]['data'],
									type: 'line',
									color: '#A9B9CB'
								},
							]
						};
						TrendChart.setOption(option)
						echartlist.push(TrendChart)
						TRENDlist.push(TrendChart)
					},
					// 全国新增趋势
					load_new_Trend: function() {
						var TrendChart = echarts.init(document.getElementById('new_trend'));
						var option = {
							title: {
								text: '全国新增趋势',
								textStyle: {
									color: '#FFFFFF'
								},
								x: 'left'
							},
							xAxis: {
								data: trend['updateDate'],
								axisLabel: {
									color: '#fff'
								}
							},
							tooltip: {
								show: true,
								trigger: 'axis',
								axisPointer: {
									type: 'line',
									axis: 'x',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							yAxis: {
								// min: 10000,
								// max: 100000,
								axisLabel: {
									color: '#fff',
									fontSize: 10,
									// formatter: function(value, index) {
									// 	var value;
									// 	if (value >= 1000) {
									// 		value = value / 1000 + 'k';
									// 	} else if (value < 1000) {
									// 		value = value;
									// 	}
									// 	return value
									// }
								},
							},
							legend: {
								type: 'plain',
								show: true,
								orient: 'horizontal',
								textStyle: { //文字样式
									color: '#ffffff',
									fontSize: 15,
								},
								left: '30%',
							},
							series: [{
									name: '新增确诊',
									data: trend['list'][4]['data'],
									type: 'line',
									color: '#C31667'
								},
								{
									name: "新增疑似",
									data: trend['list'][5]['data'],
									type: 'line',
									color: '#58DC2B'
								},
								{
									name: "新增死亡",
									data: trend['list'][7]['data'],
									type: 'line',
									color: '#A9B9CB'
								},
							]
						};
						TrendChart.setOption(option)
						echartlist.push(TrendChart)
						TRENDlist.push(TrendChart)
					},

					//2.对应数据获取的相关方法：
					getdata: function() {
						that = this
						netutil.get("/chinadata")
							.then(
								function(respond) {
									data = respond.data;
									for (var i = 0; i < data.length; i++) {
										MapData.push({
											'name': data[i]['area'],
											'value': data[i]['confirmed']
										})
										that.china_data.push(data[i]['subList'])
									}
									that.cur_province=data[0]['area'];
									that.load_ChinaMap();
									that.update_city_info();
								})
					},
					get_summarydata: function() {
						that = this
						netutil.get("/summaryDataIn")
							.then(
								function(respond) {
									that.summarydata = respond.data;
								})
					},
					get_topOverseasInput: function() {
						that = this
						netutil.get("/topOverseasInput")
							.then(
								function(respond) {
									data = respond.data;
									var names = []
									var values = []
									for (var i = 0; i < data.length; i++) {
										names.push(data[i]['name'])
										values.push(data[i]['value'])
									}
									topOverseasInput.push(names)
									topOverseasInput.push(values)
									that.load_Top();
								})
					},
					get_newAddTopProvince: function() {
						that = this
						netutil.get("/newAddTopProvince")
							.then(
								function(respond) {
									data = respond.data;
									var names = []
									var local = []
									var overseasInput = []
									for (var i = 0; i < data.length; i++) {
										names.push(data[i]['name'])
										local.push(data[i]['local'])
										overseasInput.push(data[i]['overseasInput'])
									}
									newAddTopProvince.push(names)
									newAddTopProvince.push(local)
									newAddTopProvince.push(overseasInput)
									that.load_New_Top();
								})
					},
					get_news: function() {
						that = this
						netutil.get("/homehotsearch")
							.then(
								function(respond) {
									that.homehotsearch = respond.data;
								})
					},
					get_trend: function() {
						that = this
						netutil.get("/trend")
							.then(
								function(respond) {
									trend = respond.data;
									that.load_leiji_Trend()
									that.load_new_Trend()
								})
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>
